<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添加商品</title>
    <script>
        /*
            [
                {...},
                {...},
                {...}
            ]
        */
        
    </script>
</head>
<body>
    <form action="">
        <p>
            商品名称：
            <input type="text" id="product_name">
        </p>
        <p>
            商品价格：
            <input type="text" id="product_price">
        </p>
        <p>
            商品数量：
            <input type="text" id="product_num">
        </p>
        <p>
            <input type="button" value="确认" id="btn">
        </p>
    </form>
</body>
<script>
    function $(id){
        return document.getElementById(id);
    }

    $('btn').onclick = function(){
        let arr = null;
        if(!localStorage.shop_data){
            arr = [];
        }else{
            arr = JSON.parse(localStorage.shop_data);
        }

        let obj = {};
        obj.product_name = $('product_name').value;
        obj.product_price = $('product_price').value;
        obj.product_num = $('product_num').value;
        
        arr.push(obj);
        let s = JSON.stringify(arr);
        localStorage.setItem('shop_data',s);
    }
</script>
</html>